<template>
    <div id="register">
        <el-dialog title="注册" width="400px" center :visible.sync="isRegister">
            <el-form
                    :model="RegisterUser"
                    :rules="rules"
                    status-icon
                    ref="ruleForm"
                    class="demo-ruleForm"
            >
                <el-form-item prop="name">
                    <el-input
                            prefix-icon="el-icon-user-solid"
                            placeholder="请输入账号"
                            v-model="RegisterUser.name"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input
                            prefix-icon="el-icon-view"
                            type="password"
                            placeholder="请输入密码"
                            v-model="RegisterUser.pass"
                    ></el-input>
                </el-form-item>
<!--                <el-form-item prop="confirmPass">-->
<!--                    <el-input-->
<!--                            prefix-icon="el-icon-view"-->
<!--                            type="password"-->
<!--                            placeholder="请再次输入密码"-->
<!--                            v-model="RegisterUser.confirmPass"-->
<!--                    ></el-input>-->
<!--                </el-form-item>-->
                <el-form-item prop="phone">
                    <el-input
                            prefix-icon="el-icon-umbrella"
                            type="text"
                            placeholder="请输入电话号码"
                            v-model="RegisterUser.phone"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input
                            prefix-icon="el-icon-star-on"
                            type="text"
                            placeholder="请输入邮箱"
                            v-model="RegisterUser.email"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="Register" style="width:100%;">注册</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    //电话号码
    var isPhone = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('手机号不可为空'));
        } else {
            if (value !== '') {
                var reg = /^1[3456789]\d{9}$/;
                if (!reg.test(value)) {
                    callback(new Error('请输入有效的手机号码'));
                }
            }
            callback();
        }
    };
    //邮箱
    var isEmail = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请正确填写邮箱'));
        } else {
            if (value !== '') {
                var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if (!reg.test(value)) {
                    callback(new Error('请输入有效的邮箱'));
                }
            }
            callback();
        }
    };
    // 重复密码验证
    var isConfirmPass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.RegisterUser.pass) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };
    export default {
        name: "Regist",
        props: ["register"],
        data() {
            return {
                isRegister: false, // 控制注册组件是否显示
                RegisterUser: {
                    name: "",
                    pass: "",
                    // confirmPass: "",
                    phone: "",
                    email: ""
                },
                rules: {
                    name: [{require: true, trigger: "blur"}],
                    pass: [{require: true, trigger: "blur"}],
                    // confirmPass: [
                    //     {require: true, trigger: "blur"},
                    //     {validator: isConfirmPass, trigger: "blur"}],
                    phone: [
                        {require: true, trigger: "blur"},
                        {validator: isPhone, trigger: "blur"}],
                    email: [
                        {require: true, trigger: "blur"},
                        {validator: isEmail, trigger: "blur"}]
                }
            };
        },
        watch: {
            // 监听父组件传过来的register变量，设置this.isRegister的值
            register: function (val) {
                if (val) {
                    this.isRegister = val;
                }
            },
            // 监听this.isRegister变量的值，更新父组件register变量的值
            isRegister: function (val) {
                if (!val) {
                    this.$refs["ruleForm"].resetFields();
                    this.$emit("fromChild", val);
                }
            }
        },
        methods: {
            Register() {
                // 通过element自定义表单校验规则，校验用户输入的用户信息
                this.$refs["ruleForm"].validate(valid => {
                    //如果通过校验开始注册
                    if (valid) {
                        this.$axios
                            //注册接口
                            .post("/member/register", {
                                userName: this.RegisterUser.name,
                                userPwd: this.RegisterUser.pass,
                                phone: this.RegisterUser.phone,
                                email: this.RegisterUser.email
                            })
                            .then(res => {
                                if (res.data.code == "200") {
                                    // 隐藏注册组件
                                    this.isRegister = false;
                                    // 弹出通知框提示注册成功信息
                                    this.notifySucceed("注册成功");
                                } else {
                                    // 弹出通知框提示注册失败信息
                                    this.notifyError(res.data.message);
                                }
                            })
                            .catch(err => {
                                return Promise.reject(err);
                            });
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
